<template>
	<view class="row-center text-hide" hover-class="bg-primary-op10" hover-start-time="0" hover-stay-time="50" @click="$emit('touch')">
		<view v-if="icon" class="pl-3-1 pr-1-3"><Icon :name="icon" /></view>
		<view class="flex-1 py-3-1 row-center" :class="[icon ? 'pr-3-1' : 'px-3-1', border ? 'border-b b-color-1' : '']">
			<view class="flex-1">
				<slot>
					<view class="color-main text-m">{{ title }}</view>
					<view v-if="tip && tipPosition === 'bottom'" class="text-xn color-secondary mt-0-4">{{ tip }}</view>
				</slot>
			</view>
			<view v-if="tip && tipPosition === 'right'" class="mr-1-3">
				<text class="text-xn color-secondary">{{ tip }}</text>
			</view>
			<slot name="suffix" />
			<view v-if="!hideArrow" :class="[hiddenArrow ? 'hidden' : '']"><text class="iconfont icon-you text-l color-secondary"></text></view>
		</view>
	</view>
</template>

<script>
import Icon from '../../business/icon/icon.vue';
export default {
	components: {
		Icon
	},
	props: {
		title: String,
		icon: String,
		tip: String,
		hideArrow: Boolean,
		hiddenArrow: Boolean,
		border: {
			type: Boolean,
			default: true
		},
		tipPosition: {
			type: String,
			default: 'right'
		}
	},
	setup(props, ctx) {
		return {};
	}
};
</script>

<style></style>
